<template>
  <div>
    <h1>角色管理</h1>
    <el-col :span="24">
      <el-input v-model="searchInput"
                placeholder="请输入菜品名称(可模糊查询)"
                @keyup.enter.native="search"
                prefix-icon="el-icon-search"
                clearable
                class="elInput">
      </el-input>
      <el-row style="float:right">
        <el-button type="danger" @click="deleteRoleByIdsBatch()">批量删除</el-button>
        <el-button type="warning" @click="addRole">新建角色</el-button>
      </el-row>
    </el-col>
    <br>
    <br>
    <br>
    <el-table
        ref="multipleTable"
        :data="roleData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          prop="id"
          width="55">
      </el-table-column>
      <el-table-column
          align="center"
          prop="name"
          label="角色名称">
      </el-table-column>
      <el-table-column
          align="center"
          prop="roleKey"
          label="角色权限"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          align="center"
          prop="status"
          label="角色状态">
        <template v-slot="scope">
          <el-switch
              @change="setStatus(scope.row)"
              active-value="0"
              inactive-value="1"
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color=rgb(100,105,176)>
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          label="最后修改时间"
          prop="updateTime"
          align="center">
      </el-table-column>
      <el-table-column
          align="center"
          prop="remark"
          label="备注">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-button size="mini"  @click="updateRole(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteById(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--         分页-->
    <el-pagination
        style="margin-top: 20px;text-align: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,20,30,50]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--    弹窗-->
    <el-dialog title="角色编辑" :visible.sync="dialogFormVisible">
      <RoleEdit v-if="dialogFormVisible" :id="editId" @close-dialog="closeDialog"></RoleEdit>
    </el-dialog>
  </div>

</template>

<script>
import request from "@/utils/request";
import RoleEdit from "@/components/pages/RoleEdit";

export default {
  components: {RoleEdit},
  data() {
    return {
      editId: '',
      dialogFormVisible: false,
      //模糊查询
      searchInput: "",

      //表单数据
      roleData: [],
      multipleSelection: [],
      //分页
      pageSize: 7,
      total: 0,
      currentPage: 1,

    }
  },
  //vue生命周期函数
  created() {
    this.loadRole();
  },

  methods: {
    updateRole(id) {
      this.dialogFormVisible = true
      this.editId = id
    },
    addRole() {
      this.editId = 0
      this.dialogFormVisible = true;
    },
    closeDialog(b) {
      this.dialogFormVisible = false;
      if (b) {
        this.loadRole()
      }
    },
    //状态开关的修改
    setStatus({id, status}) {
      console.log(id, status)
      request("role", "PUT", {id: id, status: status}).then(() => {
        this.$message.success("修改成功")
      }).catch(() => {
        this.$message.error("修改失败")
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadRole()
    },
    // 分页
    handleSizeChange(i) {
      this.pageSize = i;
      this.currentPage = 1;
      this.loadRole()
    },
    async loadRole() {
      let role = await request("role?page=" + this.currentPage + "&size=" + this.pageSize + "&name=" + this.searchInput + "&orderBy=update_time desc")
      //表格数据显示
      this.roleData = role.list
      //分页
      this.total = role.total
    },
    //查询回车
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //查询
    search() {
      this.loadRole()
    },
    //批量删除
    deleteRoleByIdsBatch() {
      let ids = []
      if (this.multipleSelection.length === 0) {
        this.$message.error("请选择你要删除的角色")
      } else {
        this.multipleSelection.map(o => {
          ids.push(o.id)
        })
        request("role/deleteRoleByIdsBatch?ids=" + ids, "DELETE").then(() => {
          this.$message.success("逻辑批量删除成功")
          this.loadRole()
        }).catch(() => {
          this.$message.error("批量逻辑删除失败")
        })
      }


    },
    //单个删除
    deleteById(id) {
      this.$confirm('此操作将永久禁用该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request(`role?id=${id}`, "DELETE").then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.loadRole()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  }
}
</script>

<style scoped>

/*查询框的样式*/
.elInput {
  width: 25%;
  float: left;
}

</style>